<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>主页</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">
    <link th:href="@{/css/fileinput.css}" rel="stylesheet" type="text/css">
</head>
<body>
<!--导入模板中的头部导航栏-->
<div th:replace="~{common::topbar(active='write')}"></div>
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-4">说点什么</h1>
        <p class="lead">先选图片，可以多选，然后上传，再编辑文案，最后点“发”</p>
    </div>
</div>
    <div class="container">
        <div class="row">
            <div class="col-sm">
                <div class="input-group h-100">
                    <div class="input-group-prepend">
                        <span class="input-group-text">说点什么</span>
                    </div>
                    <textarea class="form-control" aria-label="With textarea" id="note-msg"></textarea>
                </div>
            </div>
            <div class="col-sm">
                <input type="file" class="file" id="note-img" multiple name="images">
                <button type="button" class="btn btn-secondary btn-lg btn-block" id="btn-send">发</button>
            </div>
        </div>
    </div>

<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/fileinput.js}"></script>
<script th:src="@{/js/zh.js}"></script>
<script>
    // 定义发送图片的数组,所有图片id最终保存到这个数组中
    var imageData = [];
    // 定义要向后台发送的json数据，保存说说
    var noteUploadVo = {};
    // fileinput实现
    $('#note-img').fileinput({
        language: 'zh',             //设置语言
        dropZoneEnabled: true,      //是否显示拖拽区域
        showUpload: true,
        dropZoneTitle: "可以将图片拖放到这里",    //拖拽区域显示文字
        uploadUrl: '/image/save',   //上传路径
        allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],   //指定上传文件类型
        uploadAsync: true,          //异步上传
        maxFileCount: 9             //上传文件最大个数。
    }).on("fileuploaded", function(event,data) { //异步上传成功后回调
        console.log(data.response.fileId);		    //data为返回的数据
        imageData.push(data.response.fileId)
    });
    // 绑定按钮事件
    $(function(){
        $("#btn-send").on('click',function (event) {
            noteUploadVo.userId = [[${session.accountId}]];
            noteUploadVo.noteMsg = $("#note-msg").val();
            noteUploadVo.fileIds = imageData;
            console.log(noteUploadVo)
            $.ajax({
                type:"POST",
                url: "/note/save",
                data: JSON.stringify(noteUploadVo),
                contentType: "application/json;charset=UTF-8",
                dataType: 'json',
                success: function(data) {
                    alert("发送成功")
                    window.location.replace("http://localhost:8085/main.html");
                }
            });
        })
    })
</script>
</body>
</html>